<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>

</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="a_count">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="b_count">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id="c_count">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id="d_count">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>
    <!-- 图表区 -->
    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <!-- 折线图 -->
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <!-- 饼图 -->
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>

    <script src="./js/http.js"></script>
    <script>
        $(function () {
            // 1.首页四个数据的显示
            get_data();

            // 2.折线图
            // curve_show();
            // 3.将数据显示到折线图中
            get_curve_show();

            // 4.饼状图
            // pie_show();
            get_pie_show();

            // 5.柱状图
            get_column_show();
        })
        // 1.获取4个数据
        function get_data() {
            myAjax('get', '/admin/data/info', null, function (resData) {
                /* 
                "totalArticle": 223,
                "dayArticle": 18,
                "totalComment": 7999,
                "dayComment": 36
                */
                // 将数据一一赋值给页面对应的元素
                $('#a_count').html(resData.totalArticle);
                $('#b_count').html(resData.dayArticle);
                $('#c_count').html(resData.totalComment);
                $('#d_count').html(resData.dayComment);
            })
        }

        // 2.利用echarts实现文章新增趋势折线图
        // 3.3 加两个形参xArrData,Datas
        // xArrData:x轴要显示的数据，
        //  Datas：折线图要显示的数据
        function curve_show(xArrData, Datas) {
            // 2.1 初始化容器
            let charts = echarts.init(document.querySelector('#curve_show'));
            // 2.2 定义图表对应的参数
            // 此处实现的是折线图的配置
            let option = {
                // 2.2.5 设置图表标题
                title: {
                    text: '文章日新增趋势',
                    left: 'center'  // 设置标题居中显示
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // 3.4
                    data: xArrData      //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                // 2.2.6 鼠标移动到轴上即出现提示面板
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                series: [{
                    // 3.5
                    data: Datas,     //[820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    areaStyle: {},
                    // 2.2.2 设置折线上显示数字
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    // 2.2.3 将折线拐点变为圆角
                    smooth: true,
                    // 2.2.4 设置折线面板的渐变
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'white' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            };
            // 2.2.1 使用刚指定的配置项和数据显示图表。
            charts.setOption(option);
        }

        // 3.将数据显示到折线图中
        function get_curve_show() {
            myAjax('get', '/admin/data/article', null, function (resData) {
                // 3.1 构造出x轴的数据数组
                let xArrData = resData.date.map(item => item.date);
                // 3.2 构造出折线图需要的数据数组 y轴
                let Datas = resData.date.map(item => item.count);

                // resData.date.forEach(item => {
                //     xArrData.push(item.data);
                //     Data.push(item.count);
                // })

                // 3.4 调用图表生成方法，传入服务器数据完成最终结果显示
                curve_show(xArrData, Datas);
            })
        }

        // 4. 饼状图的静态结构
        function pie_show(names, datas) {
            // 4.1.初始化容器
            let charts = echarts.init(document.querySelector('#pie_show'))

            // 4.2 准备饼状图的相关参数
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    left: 10,
                    data: names    //['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        data: datas
                        // [
                        //     { value: 335, name: '直接访问' },
                        //     { value: 310, name: '邮件营销' },
                        //     { value: 234, name: '联盟广告' },
                        //     { value: 135, name: '视频广告' },
                        //     { value: 1548, name: '搜索引擎' }
                        // ]
                    }
                ]
            };
            // 4.3初始化参数并渲染饼图到指定容器中
            charts.setOption(option);
        }
        // 5.将数据显示到饼状图中
        function get_pie_show() {
            myAjax('get', '/admin/data/category', null, function (resData) {
                // 5.1 将resData中的数据加工处理成饼状图要求的数据格式
                let names = resData.date.map(item => item.name);
                // 5.2 使用map方法将服务器响应回来的{}
                let datas = resData.date.map(item => ({ name: item.name, value: item.articles }))
                // 5.3 调用图表生成方法，传入服务器数据完成最终结果显示
                pie_show(names, datas);
            })
        }

        // 7.数据显示到柱状图中
        function get_column_show() {
            // 请求接口获取数据
            myAjax('get', '/admin/data/visit', null, function (resData) {
                let xdata = [];
                let sdata = [];
                let data = resData.data;
                // 将对象中的数据转成两个新数组
                for (let key in data) {
                    xdata.push(key);  //将data对象中的key对应的值保存到xdata数组中
                    sdata.push(data[key]); // 将data对象中的当前key对应的值保存到sdata数组中
                }
                column_show(xdata, sdata);
            })
        }
        // 6.状图的静态结构
        function column_show(xdata, sdata) {
            let chars = echarts.init(document.querySelector('#column_show'));
            let option = {
                xAxis: {
                    type: 'category',
                    data: xdata   //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: sdata,  //[120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    },
                    barWidth: 30, //设置每根柱子的宽度
                    // 设置柱子颜色
                    itemStyle: {
                        color: "rgba(21, 196, 222, 1)"
                    },
                }]
            };
            chars.setOption(option);
        }

    </script>
</body>

</html>